<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./fonts/font_4783032_x4xru3jx9sj/iconfont.css">
    <link rel="stylesheet" href="./css/gaokai.css">
    <link rel="stylesheet" href="./css/magsafe.css">
    <script src="./fonts/iconfont applestore/iconfont applestore/iconfont.js"></script>
    <link rel="stylesheet" href="./css/index.css">
    <title>MagSafe</title>
</head>

<body>
    <header>
        <div class="header">
            <div class="header-svg">
                <span class="iconfont icon-xiangzuojiantou"> </span>
                <p class="header-text">产品</p>
            </div>
            <p class="header-title">MagSafe</p>
            <div class="header-svg">
                <span class="iconfont icon-gengduo-daohang"></span>
                <span class="iconfont icon-arrow-up-down-line"></span>
            </div>
        </div>
    </header>
    <main>
        <div class="list">
            <ul>
                <li>
                    <div class="biaoqian">
                        <span class="iconfont icon-biaoqian" data-id="0"></span>
                    </div>
                    <div class="list-project">
                        <img src='./images/MA7E4.jpg' class="project-img"></img>
                        <p>iPhone 16 pro 专用<br>MagSafe 透明保护壳</p>
                        <p>RMB 399</p>
                        <p>免费送货 | 预计送达时间：有现货</p>
                    </div>
                </li>
                <li>
                    <div class="biaoqian">
                        <span class="iconfont icon-biaoqian" data-id="1"></span>
                    </div>
                    <div class="list-project">
                        <img src='./images/MA7E4.jpg' class="project-img"></img>
                        <p>iPhone 16 pro 专用<br>MagSafe 透明保护壳</p>
                        <p>RMB 399</p>
                        <p>免费送货 | 预计送达时间：有现货</p>
                    </div>
                </li>
                <li>
                    <div class="biaoqian">
                        <span class="iconfont icon-biaoqian" data-id="2"></span>
                    </div>
                    <div class="list-project">
                        <img src='./images/MA7E4.jpg' class="project-img"></img>
                        <p>iPhone 16 pro 专用<br>MagSafe 透明保护壳</p>
                        <p>RMB 399</p>
                        <p>免费送货 | 预计送达时间：有现货</p>
                    </div>
                </li>
                <li>
                    <div class="biaoqian">
                        <span class="iconfont icon-biaoqian" data-id="3"></span>
                    </div>
                    <div class="list-project">
                        <img src='./images/MA7E4.jpg' class="project-img"></img>
                        <p>iPhone 16 pro 专用<br>MagSafe 透明保护壳</p>
                        <p>RMB 399</p>
                        <p>免费送货 | 预计送达时间：有现货</p>
                    </div>
                </li>
                <li>
                    <div class="biaoqian">
                        <span class="iconfont icon-biaoqian" data-id="4"></span>
                    </div>
                    <div class="list-project">
                        <img src='./images/MA7E4.jpg' class="project-img"></img>
                        <p>iPhone 16 pro 专用<br>MagSafe 透明保护壳</p>
                        <p>RMB 399</p>
                        <p>免费送货 | 预计送达时间：有现货</p>
                    </div>
                </li>
                <li>
                    <div class="biaoqian">
                        <span class="iconfont icon-biaoqian" data-id="5"></span>
                    </div>
                    <div class="list-project">
                        <img src='./images/MA7E4.jpg' class="project-img"></img>
                        <p>iPhone 16 pro 专用<br>MagSafe 透明保护壳</p>
                        <p>RMB 399</p>
                        <p>免费送货 | 预计送达时间：有现货</p>
                    </div>
                </li>
                <li>
                    <div class="biaoqian">
                        <span class="iconfont icon-biaoqian" data-id="6"></span>
                    </div>
                    <div class="list-project">
                        <img src='./images/MA7E4.jpg' class="project-img"></img>
                        <p>iPhone 16 pro 专用<br>MagSafe 透明保护壳</p>
                        <p>RMB 399</p>
                        <p>免费送货 | 预计送达时间：有现货</p>
                    </div>
                </li>
                <li>
                    <div class="biaoqian">
                        <span class="iconfont icon-biaoqian" data-id="7"></span>
                    </div>
                    <div class="list-project">
                        <img src='./images/MA7E4.jpg' class="project-img"></img>
                        <p>iPhone 16 pro 专用<br>MagSafe 透明保护壳</p>
                        <p>RMB 399</p>
                        <p>免费送货 | 预计送达时间：有现货</p>
                    </div>
                </li>
            </ul>
        </div>
    </main>
    <footer>
        <div class="gao_nav">
            <ul>
                <li>
                    <a href="./index.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-tuijian"></use>
                        </svg>
                        <p>为你推荐</p>
                    </a>
                </li>
                <li>
                    <a href="./product.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-chanpin"></use>
                        </svg>
                        <p>产品</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-faxian1"></use>
                        </svg>
                        <p>深入探索</p>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-sousuo"></use>
                        </svg>
                        <p>搜索</p>
                    </a>
                </li>
                <li>
                    <a href="./shopping.html">
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-gouwudai"></use>
                        </svg>
                        <p>购物袋</p>
                    </a>
                </li>
            </ul>
        </div>
    </footer>
</body>
<script src="./js/MagSafe.js"></script>
</html>